<template>

    <div class="data-preview-container">

        <div class="preview">

            <div class="title">

                <div class="close-icon" @click="close">
                    <i class="iconfont icon-close"></i>
                </div>

                {{ previewRequires.name }}

            </div>

            <div class="switch-container">
                <template v-if="dataType === 'imagery'">
                    <div class="map-icon" @click="switchView('imageryMetadataView')" :class="{'viewSelect':currentView==='imageryMetadataView'}"><i class="iconfont icon-info-o"></i></div>
                </template>
                <template v-else>
                    <div class="map-icon" @click="switchView('metadataView')" :class="{'viewSelect':currentView==='metadataView'}"><i class="iconfont icon-info-o"></i></div>
                    <div class="map-icon" @click="switchView('tableView')" :class="{'viewSelect':currentView==='tableView'}"><i class="iconfont icon-table"></i></div>
                </template>

                <div class="map-icon" @click="switchView('mapView')" :class="{'viewSelect':currentView==='mapView'}"><i class="iconfont icon-map"></i></div>
            </div>

            <keep-alive>
                <component 
                :is-private="isPrivate"
                :dataType="dataType"
                :is="currentView"
                :preview-data="previewRequires">
                </component>
            </keep-alive>

        </div>

    </div>

</template>

<script>

    import imageryMetadataView from './imagery-metadata-view'
    import metadataView from './metadata-view'
    import mapView from './map-view'
    import tableView from './table-view'
    import Bus from '@/utils/event_bus'

    export default {

        data: function() {
            return {
                currentView: 'mapView',
                georeferenceShow: false,
                previewRequires: this.previewData
            }
        },

        props: {
            previewData: {
                type: Object,
                default: {}
            },
            isPrivate: {
                type: Boolean,
                default: false
            },
            basePath: String,
            dataType: String
        },

        components: {
            metadataView,
            imageryMetadataView,
            mapView,
            tableView,
        },

        created: function() {
            
            if (this.previewRequires.view) {

                this.currentView = this.previewRequires.view + 'View';

            }

            Bus.$off('spatialize-event');
            Bus.$on('spatialize-event', () => {

                this.georeferenceShow = true;

            });

            Bus.$off('close-georeference-panel');
            Bus.$on('close-georeference-panel', () => {

                this.georeferenceShow = false;

            });

            Bus.$off('georeference-success');
            Bus.$on('georeference-success', () => {

                this.georeferenceShow = false;
                Bus.$emit('data-map-preview', this.previewRequires.uid);

            });

        },

        mounted: function() {

            let urlParams = this.$route.params;
            this.setUrl();

        },

        methods: {

            close: function() {

                this.$emit('close-preview');
                this.setUrl('base');

            },

            /**
             * 切换数据视图类型
             */
            switchView: function(type) {

                this.currentView = type;
                this.setUrl();

            },

            /**
             * 根据当前页面状态修改页面URL
             */
            setUrl: function(base) {

                let newUrl = '';
                let dataType = this.isPrivate ? 'data' : 'public-data';
                // let currentRoute = this.$router.currentRoute;
                // let path = currentRoute.path;
                // let path = this.previewRequires.path;

                if (!base) {
                    newUrl = `${this.basePath}/${this.previewRequires.uid}/${this.currentView.replace('View', '')}`;
                    // newUrl = `/platform.html#${this.basePath}/${this.previewRequires.uid}/${this.currentView.replace('View', '')}`;
                }
                
                if (base === 'base') {
                    newUrl = `${this.basePath}`;
                    // newUrl = `/platform.html#${this.basePath}`;
                }

                let hasHistoryApi = window.history && history.pushState;

                if (hasHistoryApi) {
                    history.pushState(null, '', newUrl);
                } else {
                    location.href = newUrl;
                }
                return;

            }

        },
    }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>

    @import "common";

    .data-preview-container {

        // position: absolute;
        // @include absolute (0px, 0px, 0px, 0px);

        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 2000;
        background: rgba(0, 0, 0, .5);

        .preview{

            @include absolute (20px, 20px, 20px, 20px);
            background: $bgWhite;
            padding: 8px;
            z-index: 10;
            font-size: 12px;
            border-radius: $bdRadius;
            box-shadow:0 4px 10px 1px rgba(48,59,70,0.20);

            div{
                @include box-sizing(border-box);
            }

            .title {

                @include text-overflow;
                overflow: hidden;
                width: 100%;
                height: 48px;
                line-height: 48px;
                font-size: $fontSizeBase;
                padding: 0 14px;
                margin-left: -8px;
                position: absolute;
                z-index: 100;
                top: 0;
                background-color: $bgWhite;
                border-top-left-radius: $bdRadius;
                border-top-right-radius: $bdRadius;

                .close-icon{
                    float: right;
                    cursor: pointer;

                    &:hover{
                        color: $primary;
                    }

                    >i {
                        font-size: 20px;
                    }
                }

                >span{
                    font-size: 16px;
                    font-weight: 500;
                }
            }

            .switch-container{
                position: absolute;
                background-color: $bgWhite;
                z-index: 11;
                right: 21px;
                bottom: 21px;
                // width: 123px;
                height: 26px;
                border-radius: 14px !important;
                cursor: pointer;
                border: 1px solid $bdGray;
                box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 4px 6px 0 rgba(170, 182, 206, 0.36);

                >div{
                    float: left;
                    width: 40px;
                    border-radius: 12px;
                    height: 24px;
                    text-align: center;
                    line-height: 24px;
                    color: $deepGray;
                    cursor: pointer;
                }

                .viewSelect{
                    background: $primary;
                    color: $white;
                }
            }

        }
    }

</style>
